<template>
	<view class="select">
		<view class="select-tap" @click.stop.native="changeShow()">
			<slot></slot>
		</view>
		<view class="select-model" v-show="show">
			<view :class="'model model-'+size" @click.stop.native="changeShow()"></view>
			<view :class="'content content-'+size">
				<view class="top">
					<view></view>
					<view>{{title}}</view>
					<uni-icons type="closeempty" size="26" @click.stop.native="changeShow()"></uni-icons>
				</view>
				<view class="view flex-1">
					<slot name="dataview"></slot>
				</view>
				<view class="dataview-white"></view>
			</view>

		</view>
	</view>
</template>

<script>
	import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	export default {
		name:'select-model',
		components: {
			uniIcons
		},
		props: {
			size: {
				type: String,
				// default: 'mini' //mini more all
				// default: 'more' //mini more all
				default: 'all' //mini more all
			},
			title: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				show: false,
			}
		},
		methods: {
			changeShow() {
				this.show = !this.show;
				this.$emit("update:mainScroll", !this.show);
			}
		}
	}
</script>

<style scoped>
	.select-model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}

	.select-model .model {
		background-color: rgba(0, 0, 0, .4);
	}

	.select-model .content {
		background-color: white;
		display: flex;
		flex-direction: column;
		border-radius: 32upx;
	}

	.select-model .content .view {
		height: 100%;
		overflow: hidden;
		position: relative;
		margin-bottom: var(--window-bottom);
	}

	.select-model .content .dataview-white {
		margin-top: 20upx;
		min-height: var(--window-bottom);
		max-height: var(--window-bottom);
	}

	.select-model .content .top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32upx;
		line-height: 120upx;
		font-size: 36upx;
		color: #303741;
		font-weight: 700;
	}

	.select-model .content .top .uni-icons {
		font-weight: 300;
	}

	.select-model .model-mini {
		height: 60%;
	}

	.select-model .content-mini {
		margin-top: -20%;
		height: 60%;
	}

	.select-model .model-more {
		height: 45%;
	}

	.select-model .content-more {
		margin-top: -20%;
		height: 75%;
	}

	.select-model .model-all {
		height: 25%;
	}

	.select-model .content-all {
		margin-top: -20%;
		height: 95%;
	}

	.flex-1 {
		flex: 1;
	}
</style>
